<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="w-full bg-[#F6F9FE] py-5">
    <!-- 關於我們內容 -->
    <section class="w-full bg-white max-w-300 mx-auto p-7 px-12">
      <a-form
        ref="signupFormRef"
        :model="signupForm"
        :label-col="{ span: 3 }"
        autocomplete="off"
        :rules="rules"
        style="width: 80%"
        label-align="left"
      >
        <div class="w-full flex flex-col md:flex-row">
          <div class="flex-1">
            <a-form-item :label-col="{ span: 6 }" label="姓名" name="first_name">
              <a-input v-model:value="signupForm.first_name" placeholder="請輸入姓氏" />
            </a-form-item>
          </div>
          <div class="flex-1 md:pl-5">
            <a-form-item name="last_name" class="md:ml-5">
              <a-input v-model:value="signupForm.last_name" placeholder="然後輸入名稱" />
            </a-form-item>
          </div>
        </div>

        <a-form-item label="出生日期" name="birthday">
          <a-date-picker
            v-model:value="signupForm.birthday"
            style="width: 100%"
            placeholder="請輸入出生日期(DD/MM/YYYY)"
            format="DD/MM/YYYY"
            value-format="DD/MM/YYYY"
          />
        </a-form-item>
        <a-form-item label="郵箱" name="email">
          <a-input v-model:value="signupForm.email" placeholder="請輸入郵箱" />
        </a-form-item>
        <a-form-item label="電話號碼" name="phone">
          <a-input v-model:value="signupForm.phone" placeholder="請輸入電話號碼" />
        </a-form-item>
        <div class="w-full flex flex-col md:flex-row gap-5">
          <div class="flex-1">
            <a-form-item :label-col="{ span: 6 }" label="身份證件" name="idcard_img1">
              <div
                class="md:flex-1 h-[140px] bg-[#F9F9FA] border-solid border-[1px] border-[#DADFE6] flex items-center justify-center rounded-md relative overflow-hidden"
              >
                <UploadFile @upload-success="idCardFrontUploadSuccess">
                  <div v-if="!signupForm.idcard_img1">
                    <p class="flex justify-center">
                      <img src="../assets/images/upload.png" alt="Upload" class="size-7" />
                    </p>
                    <p class="text-[#7B7D85] mt-3">上傳身份證正面</p>
                  </div>
                  <img
                    :src="signupForm.idcard_img1"
                    class="absolute top-0 left-0 w-full h-full"
                    v-else
                    alt="身份證反面"
                  />
                </UploadFile>
              </div>
            </a-form-item>
          </div>
          <div class="flex-1">
            <a-form-item name="idcard_img2">
              <div
                class="md:flex-1 h-[140px] bg-[#F9F9FA] border-solid border-[1px] border-[#DADFE6] flex items-center justify-center rounded-md md:mr-1/4 relative overflow-hidden"
              >
                <UploadFile @upload-success="idCardBackUploadSuccess">
                  <div v-if="!signupForm.idcard_img2">
                    <p class="flex justify-center">
                      <img src="../assets/images/upload.png" alt="Upload" class="size-7" />
                    </p>
                    <p class="text-[#7B7D85] mt-3">上傳身份證反面</p>
                  </div>
                  <img
                    :src="signupForm.idcard_img2"
                    class="absolute top-0 left-0 w-full h-full"
                    v-else
                    alt="身份證反面"
                  />
                </UploadFile>
              </div>
            </a-form-item>
          </div>
        </div>
        <a-form-item label="學術文件" name="academic">
          <div
            class="h-[48px] border-solid border-[1px] border-[#d9d9d9] rounded-[10px] px-4 flex items-center justify-between"
          >
            <span :style="{ color: academicName ? '#1f1f1f' : '#bfbfbf' }">
              {{ academicName ? academicName : '未選擇文件' }}
            </span>
            <UploadFile @upload-success="academicUploadSuccess" v-if="!academicName">
              <span class="primary-color cursor-pointer underline underline-offset-3"
                >點擊上傳</span
              >
            </UploadFile>
            <span
              class="text-[#E12E29] cursor-pointer underline underline-offset-3"
              v-else
              @click="academicUploadSuccess({ name: '', path: '' })"
            >
              删除
            </span>
          </div>
          <!-- <a-input v-model:value="signupForm.academic" placeholder="未選擇文件">
            <template #suffix>
              <UploadFile @upload-success="academicUploadSuccess">
                <p class="primary-color cursor-pointer">點擊上傳</p>
              </UploadFile>
            </template>
          </a-input> -->
        </a-form-item>
        <a-form-item label="簡歷" name="resume">
          <div
            class="h-[48px] border-solid border-[1px] border-[#d9d9d9] rounded-[10px] px-4 flex items-center justify-between"
          >
            <span :style="{ color: resumeName ? '#1f1f1f' : '#bfbfbf' }">
              {{ resumeName ? resumeName : '未選擇文件' }}
            </span>
            <UploadFile @upload-success="resumeUploadSuccess" v-if="!resumeName">
              <span class="primary-color cursor-pointer underline underline-offset-3"
                >點擊上傳</span
              >
            </UploadFile>
            <span
              class="text-[#E12E29] cursor-pointer underline underline-offset-3"
              v-else
              @click="resumeUploadSuccess({ name: '', path: '' })"
            >
              删除
            </span>
          </div>
          <!-- <a-input v-model:value="signupForm.resume" placeholder="未選擇文件">
            <template #suffix>
              <UploadFile @upload-success="resumeUploadSuccess">
                <p class="primary-color cursor-pointer">點擊上傳</p>
              </UploadFile>
            </template>
          </a-input> -->
        </a-form-item>
        <a-form-item label="工作經驗證明" name="working">
          <div
            class="h-[48px] border-solid border-[1px] border-[#d9d9d9] rounded-[10px] px-4 flex items-center justify-between"
          >
            <span :style="{ color: workingName ? '#1f1f1f' : '#bfbfbf' }">
              {{ workingName ? workingName : '未選擇文件' }}
            </span>
            <UploadFile @upload-success="workingUploadSuccess" v-if="!workingName">
              <span class="primary-color cursor-pointer underline underline-offset-3"
                >點擊上傳</span
              >
            </UploadFile>
            <span
              class="text-[#E12E29] cursor-pointer underline underline-offset-3"
              v-else
              @click="workingUploadSuccess({ name: '', path: '' })"
            >
              删除
            </span>
          </div>
          <!-- <a-input v-model:value="signupForm.working" placeholder="未選擇文件">
            <template #suffix>
              <UploadFile @upload-success="workingUploadSuccess">
                <p class="primary-color cursor-pointer">點擊上傳</p>
              </UploadFile>
            </template>
          </a-input> -->
        </a-form-item>
        <a-form-item label="註冊課程" name="course_id">
          <a-radio-group v-model:value="signupForm.course_id">
            <a-radio
              :value="course.id"
              v-for="course in courseList"
              :key="course.title + course.id"
            >
              {{ course.title }}
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <div class="flex justify-center gap-5">
        <a-button type="primary" size="large" style="padding: 0 50px" @click="submitForm">
          提交
        </a-button>
        <a-button type="primary" size="large" ghost style="padding: 0 50px" @click="resetForm"
          >取消</a-button
        >
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { message, theme } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form'
import UploadFile from '@/components/UploadFile.vue'
import { signUpCourseApi, courseConfigApi } from '@/api'
import type { SignUpCourseType, CourseType } from '@/api/type'
import { validatePhone, validateEmail } from '@/utils/validate'
const route = useRoute()
const router = useRouter()
const { token: themeToken } = theme.useToken()

const signupFormRef = ref()
const signupForm = ref<SignUpCourseType>({
  first_name: '',
  last_name: '',
  phone: '',
  email: '',
  birthday: '',
  idcard_img1: '',
  idcard_img2: '',
  academic: '',
  resume: '',
  working: '',
  course_id: null,
})
const workingName = ref('')
const resumeName = ref('')
const academicName = ref('')
const courseList = ref<CourseType[]>()

const rules: Record<string, Rule[]> = {
  first_name: [{ required: true, message: '請輸入您的姓氏！' }],
  last_name: [{ required: true, message: '請輸入您的名稱！' }],
  phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
  email: [{ required: true, validator: validateEmail, trigger: 'blur' }],
  birthday: [{ required: true, message: '請輸入您的生日！' }],
  idcard_img1: [{ required: true, message: '請上傳您的身份證正面！' }],
  idcard_img2: [{ required: true, message: '請上傳您的身份證反面！' }],
  academic: [{ required: true, message: '請上傳您的學術文件！' }],
  resume: [{ required: true, message: '請上傳您的簡歷！' }],
  working: [{ required: true, message: '請上傳您的工作經驗證明！' }],
  course_id: [{ required: true, message: '請選擇您要註冊的課程！' }],
}

const workingUploadSuccess = ({ path, name }: { path: string; name: string }) => {
  console.log(path, 'path')
  workingName.value = name
  signupForm.value.working = path
}

const resumeUploadSuccess = ({ path, name }: { path: string; name: string }) => {
  console.log(path, 'path')
  resumeName.value = name
  signupForm.value.resume = path
}

const academicUploadSuccess = ({ path, name }: { path: string; name: string }) => {
  console.log(path, 'path')
  academicName.value = name
  signupForm.value.academic = path
}

const idCardBackUploadSuccess = ({ path }: { path: string }) => {
  console.log(path, 'path')
  signupForm.value.idcard_img2 = path
}

const idCardFrontUploadSuccess = ({ path }: { path: string }) => {
  console.log(path, 'path')
  signupForm.value.idcard_img1 = path
}

// 獲取課程列表
const getCourseList = () => {
  courseConfigApi().then((res) => {
    courseList.value = res
    const courseId = route.query.courseId
    if (courseId) {
      signupForm.value.course_id = Number(courseId)
    }
    console.log(courseList.value, courseId)
  })
}

// 提交表單
const submitForm = () => {
  signupFormRef.value.validate().then((res: SignUpCourseType) => {
    console.log(res)
    signUpCourseApi(signupForm.value).then(() => {
      message.success('註冊成功')
      resetForm()
    })
  })
}

const resetForm = () => {
  signupFormRef.value.resetFields()
  router.back()
}
onMounted(() => {
  getCourseList()
})
</script>

<style scoped>
.primary-color {
  color: v-bind('themeToken.colorPrimary');
}
.ant-input,
.ant-picker,
.ant-input-affix-wrapper,
.ant-radio-group {
  height: 48px;
  line-height: 48px;
  border-radius: 10px;
}
.w-full .ant-form-item {
  width: 100%;
}
/* .underline {
  position: relative;
}
.underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: v-bind('themeToken.colorPrimary');
} */
</style>
